<template>
  <div class="head">
    <div class="g-clickable back" @click="$emit('back')">
      <i class="iconfont icon-arrow-down2"></i>
    </div>
    <span>{{ title }}</span>
    <div class="g-clickable help">
      <i class="iconfont icon-help"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  span {
    font-size: 16px;
    line-height: 1;
    font-family: "Roboto Bold";
    color: var(--color);
  }

  .g-clickable {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;

    &.back {
      i {
        transform: rotate(90deg);
      }
    }
    &.help {
      border-radius: 14px;
      background-color: rgba(255, 255, 255, 0.03);
    }
    i {
      font-size: 24px;
      color: var(--color);
    }
  }
}
</style>
